<template>
    <div class="theme">
        <div class="bg-[#3aa01a] pt-[60px] h-[240px]">
            <Title
                title="营养定制健康主题"
                desc="NUTRITIONAL CUSTOMIZED HEALTH THEME"
                color="white"
            />
        </div>
        <div class="h-[385px] bg-[#f3faf9] relative pb-[60px]">
            <a-carousel
                class="carousel-container"
                autoplay
                ref="carouselRef"
                :afterChange="handleChange"
            >
                <div
                    v-for="(slide, index) in slides"
                    :key="index"
                    class="h-[385px] w-[1200px] bg-[#f3faf9] py-[90px]"
                >
                    <div class="text-[24px] font-500 text-[#3C8916] mb-[22px]">
                        {{ slide.title }}
                    </div>
                    <div class="flex flex-wrap gap-[20px] text-[#3C8916]">
                        <div
                            v-for="(item, itemIndex) in slide.items"
                            :key="itemIndex"
                            class="text-[14px] bg-white rounded-[10px] px-[16px] py-[8px] cursor-pointer hover:text-[#3C8916] transition-colors"
                        >
                            • {{ item }}
                        </div>
                    </div>
                </div>
            </a-carousel>

            <div
                class="w-[940px] absolute top-[-50px] left-[50%] translate-x-[-50%] dots-list flex justify-between items-center gap-[20px] mx-auto"
                style="z-index: 10"
            >
                <div
                    v-for="(item, index) in dots"
                    :key="index"
                    class="dots-item w-[100px] h-[100px] rounded-[50%] flex justify-center items-center cursor-pointer shadow-md"
                    :class="current === index ? 'bg-[#3C8916]' : 'bg-white'"
                    @click="goTo(index)"
                >
                    <div class="w-[60px] h-[60px]">
                        <img
                            :src="item"
                            :alt="`dot-${index}`"
                            class="w-full h-full object-contain"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Title } from './index.js'

import dots_1 from '../../assets/images/home/dots_1.png'
import dots_2 from '../../assets/images/home/dots_2.png'
import dots_3 from '../../assets/images/home/dots_3.png'
import dots_4 from '../../assets/images/home/dots_4.png'
import dots_5 from '../../assets/images/home/dots_5.png'
import dots_6 from '../../assets/images/home/dots_6.png'
import dots_7 from '../../assets/images/home/dots_7.png'
import dots_8 from '../../assets/images/home/dots_8.png'

interface SlideContent {
    title: string
    items: string[]
}

const slides = ref<SlideContent[]>([
    {
        title: '代谢系统/METABOLIC SYSTEM',
        items: [
            '糖尿病管理',
            '体重管理',
            '血脂管理',
            '血压管理',
            '代谢综合征',
            '痛风代谢',
            '肥胖症'
        ]
    },
    {
        title: '内分泌系统/ENDOCRINE SYSTEM',
        items: [
            '甲状腺功能',
            '性腺功能紊乱',
            '骨代谢',
            '肾上腺皮质功能',
            '生长激素类',
            '胰腺内分泌',
            '甲状旁腺功能',
            '垂体功能紊乱',
            '性激素紊乱',
            '糖尿病相关',
            '甲状腺相关疾病',
            '生殖内分泌',
            '内分泌代谢病'
        ]
    },
    {
        title: '免疫系统/IMMUNE SYSTEM',
        items: [
            '免疫力',
            '自身免疫性疾病相关',
            '过敏症',
            '风湿免疫性疾病相关',
            '免疫缺陷',
            '免疫系统功能紊乱',
            '免疫力增强'
        ]
    },
    {
        title: '神经系统/NERVOUS SYSTEM',
        items: ['神经衰弱', '神经炎', '神经痛', '神经退行性', '记忆力差']
    },
    {
        title: '循环系统/CIRCULATORY SYSTEM',
        items: [
            '心血管健康',
            '静脉血液循环功能改善',
            '心脏病预防保健',
            '冠状动脉供血不足',
            '心脏功能紊乱',
            '心脑血管疾病相关疾病',
            '心肌缺血性疾病',
            '心脑血管疾病预防'
        ]
    },
    {
        title: '泌尿系统/URINARY SYSTEM',
        items: [
            '肾功能紊乱',
            '泌尿系统功能改善相关',
            '尿路结石症',
            '泌尿系统感染相关',
            '肾功能紊乱相关',
            '泌尿系统疾病相关疾病',
            '泌尿系统感染',
            '泌尿系统疾病预防'
        ]
    },
    {
        title: '代谢系统/METABOLIC SYSTEM',
        items: [
            '糖尿病管理',
            '体重管理',
            '血脂管理',
            '血压管理',
            '代谢综合征',
            '痛风代谢',
            '肥胖症'
        ]
    },
    {
        title: '内分泌系统/ENDOCRINE SYSTEM',
        items: [
            '甲状腺功能',
            '性腺功能紊乱',
            '骨代谢',
            '肾上腺皮质功能',
            '生长激素类',
            '胰腺内分泌',
            '甲状旁腺功能',
            '垂体功能紊乱',
            '性激素紊乱',
            '糖尿病相关',
            '甲状腺相关疾病',
            '生殖内分泌',
            '内分泌代谢病'
        ]
    },
])

const dots = ref([
    dots_1,
    dots_2,
    dots_3,
    dots_4,
    dots_5,
    dots_6,
    dots_7,
    dots_8
])

const carouselRef = ref()
const current = ref<number>(0)

const handleChange = (index: number) => {
    current.value = index
}

const goTo = (index: number) => {
    if (carouselRef.value) {
        current.value = index
        carouselRef.value.goTo(index)
    }
}
</script>

<style lang="less" scoped>
.theme {
    position: relative;
}

.carousel-container {
    height: 385px;
    width: 1200px;
    margin: 0 auto;
    z-index: 1;

    :deep(.ant-carousel) {
        .slick-slide {
            pointer-events: auto;
        }
    }
}

.dots-list {
    position: absolute;
    z-index: 20;
}

.dots-item {
    position: relative;
    z-index: 20;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    &:hover {
        transform: translateY(-2px);
    }

    img {
        transition: all 0.3s ease;
        filter: brightness(0.8);
    }

    &.bg-\[\#3C8916\] {
        img {
            filter: brightness(2);
        }
    }
}
</style>
